<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
          body{
               margin: 0;
               padding: 0;
               font-size: 14px;
          }
         .banner img{
              width: 100%;
         }
         a{
              text-decoration: none;
         }
        .main{
             margin: 0 5px;

        }

          .item{
               height: 90px;
               border-radius: 5px;
               margin-top: 5px;
               display: flex;
          }

          .pub{
              width: 100px;
          }
          .sub{
                flex: 1;

          }
          .sub a{
               float: left;
               height: 45px;
               width: 50%;
               border-left: 1px solid #fff;
               box-sizing: border-box;
               line-height: 45px;
               color: #fff;
               text-align: center;
          }
          .sub a:nth-child(-n+2){
                border-bottom: 1px solid #fff;
          }
          .item:nth-child(1){
                 background-color: #0da5d6;
          }
          .item:nth-child(2){
              background-color: #a94442;
          }
          .item:nth-child(3){
              background-color: #2AB561;
          }
          .item:nth-child(4){
                background-color: #FF9C23;
          }

          .extra {
               display: flex;
          }
          .extra a{
               flex: 1;
          }
          .extra a img{
               width: 100%;
          }
    </style>
</head>
<body>
     <div class="wrap">
            <header class="banner">
                  <a href="#">
                        <img src="images/banner.jpg">
                  </a>
            </header>
         <div class="main">
             <section class="nav">
                 <div class="item">
                     <div class="pub"></div>
                     <div class="sub">
                         <a href="javascript:;">海外酒店</a>
                         <a href="javascript:;">团购</a>
                         <a href="javascript:;">特惠酒店</a>
                         <a href="javascript:;">客栈公寓</a>
                     </div>
                 </div>
                 <div class="item">
                     <div class="pub"></div>
                     <div class="sub">
                         <a href="javascript:;">火车票</a>
                         <a href="javascript:;">汽车票船票</a>
                         <a href="javascript:;">国际机票</a>
                         <a href="javascript:;">自驾专车</a>
                     </div>
                 </div>
                 <div class="item">
                     <div class="pub"></div>
                     <div class="sub">
                         <a href="javascript:;">攻略身边</a>
                         <a href="javascript:;">邮轮</a>
                         <a href="javascript:;">周末游</a>
                         <a href="javascript:;">保险签证</a>
                     </div>
                 </div>
                 <div class="item">
                     <div class="sub">
                         <a href="javascript:;">门票玩乐</a>
                         <a href="javascript:;">美食</a>
                         <a href="javascript:;">全球购</a>
                         <a href="javascript:;">礼品卡</a>
                         <a href="javascript:;">出境WIFI</a>
                         <a href="javascript:;">更多</a>
                     </div>
                 </div>
             </section>
             <!-- 其它部分 -->
             <section class="extra">
                 <a href="javascript:;">
                 <img src="./images/extra_1.png">
             </a>
                 <a href="javascript:;">
                     <img src="./images/extra_2.png">
                 </a>
             </section>
         </div>

     </div>
</body>
</html>